<nz-list style="padding-top: 30px" [nzLoading]="loading" [nzDataSource]="list" [nzGrid]="{gutter: 24, lg: 6, md: 8, sm: 12, xs: 24 }">
    <ng-template #item let-item>
        <nz-list-item>
            <nz-card nzHoverable style="width: 100%;position: relative">
                <div class="pro-shadow" *ngIf="item.cour_name != ''">
                    <a (click)="previewCourse(item.cour_id , item.cour_name)">
                        <i class="anticon anticon-eye"></i>
                        <br />查看章节</a>
                    <a (click)="AddCourse(item.cour_id)">
                        <i class="anticon anticon-edit"></i>
                        <br />编辑课程</a>
                    <!--<a (click) = ''><i  class="anticon anticon-plus" ></i><br />引用</a>-->
                    <a (click)="deleteCourse(item.cour_id)">
                        <i class="anticon anticon-delete"></i>
                        <br />删除课程</a>
                </div>
                <ng-container *ngIf="item.cour_name == ''">
                    <!--[routerLink]="['../../add-project', 0]"-->
                    <ng-template #cover>
                        <img alt="'添加课程'" (click)="AddCourse()" src="./assets/img/addPro.png ">
                    </ng-template>
                    <nz-card-meta [nzTitle]="'添加课程'" [nzDescription]="item.subDescription">
                    </nz-card-meta>
                </ng-container>
                <ng-container *ngIf="item.cour_name!=''" style="width: 100%">
                    <ng-template #cover>
                        <div [appAutobg]="item.cour_img ? (IP_PORT + item.cour_img):(IP_PORT + item.cour_img)">
                        </div>
                    </ng-template>
                    <nz-card-meta [nzTitle]="nzTitle" [nzDescription]="item.subDescription">
                        <ng-template #nzTitle>
                            <a routerLink="" style="color: #656565;">{{item.cour_name}}</a>
                        </ng-template>
                    </nz-card-meta>
                    <div class="card-item-content" [appMargin] top="10">
                        <span class="text-white">&nbsp;</span>
                    </div>
                </ng-container>
            </nz-card>
        </nz-list-item>
    </ng-template>
</nz-list>
<nz-pagination *ngIf="list?.length!==0" class="pull-right" appMargin bottom="20" [(nzPageSize)]="pageSize" [(nzPageIndex)]="pageIndex"
    (nzPageIndexChange)="getData()" [nzTotal]="total"></nz-pagination>


<!-- 新增弹出层 -->

<form nz-form [formGroup]="validateForm">
    <nz-modal [nzWrapClassName]="'vertical-center-modal'" [nzVisible]="CourseModule" [nzTitle]="AddTitle" [nzConfirmLoading]="loading"
        [nzContent]="CourseInfo" (nzOnCancel)="CloseCourse($event)" (nzOnOk)="AddSubmit()" [nzOkText]="'保存'" [nzCancelText]="'取消'"
        [nzStyle]="style">
        <ng-template #CourseInfo>
            <div nz-form-item class="d-flex d-flex-margin">
                <label for="xxName" nz-form-item-required>课 程 名 称</label>
                <div nz-form-control class="flex-1" nzHasFeedback [nzValidateStatus]="getFormControl('xxName')">
                    <nz-input formControlName="xxName" [(ngModel)]="CourName" name="xxName" [nzSize]="'large'" [nzPlaceHolder]="placeholder"
                        nzId="no" style="position: relative;top:2px;"></nz-input>
                    <div nz-form-explain *ngIf="getFormControl('xxName').dirty&&getFormControl('xxName').hasError('required')">
                        请输入课程名称!
                    </div>
                </div>
            </div>
            <div nz-form-item>
                <label nz-form-item-required>课 程 图 片</label>
                <button nz-button class="file-upload mt-sm" style="position: relative;top:2px;">
                    <input id="file1" accept type="file" (change)="fileChange($event)" />
                    <i class="anticon anticon-upload"></i>
                    <span>上传图片</span>
                </button>
            </div>
            <div nz-form-item nz-row>
                <div nz-col [nzSpan]="4">

                </div>
                <div nz-col [nzSpan]="16">
                    <div nz-form-label nz-col [nzSpan]="6" [nzSm]="4">

                    </div>
                    <div nz-form-control nz-col [nzSm]="20" style="margin-top: -5px">
                        <div nz-form-control nz-col [nzSm]="20" style="margin-top: -5px">
                            <div nz-form-control nz-col [nzSm]="8">
                                <img [src]="img ?this.IP_PORT + img : './assets/img/default-img.png'" style="width: 100px;height: auto;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ng-template>
    </nz-modal>
</form>

<!-- 查看章节弹出层 -->
<nz-modal [nzWrapClassName]="'vertical-center-modal'" [nzFooter]="'true'" [nzVisible]="showCourseDetail" [nzTitle]="'查看课程'"
    [nzConfirmLoading]="loading" [nzContent]="mojorContent1" (nzOnCancel)="showCourseDetail=false" (nzOnOk)="showCourseDetail=false"
    [nzStyle]="style1" [nzOkText]="'确定'" [nzCancelText]="'取消'">
    <ng-template #mojorContent1>
        <table cellspacing="0" cellpadding="0" border="0" width="100%">
            <tr>
                <td width="10%" align="right" height="50px">课程名称：</td>
                <td width="90%">
                    {{ DetailName }}
                </td>
            </tr>
            <tr>
                <td width="10%" align="right">章节列表：</td>
                <td width="90%">
                    <table class="classlist" cellpadding="0" cellspacing="0">
                        <tr>
                            <td width="180px">章节名称</td>
                            <td width="380px">关联项目</td>
                            <td width="140px">操作</td>
                        </tr>
                        <tr *ngFor="let list of CourseDataList;let i = index">
                            <td>
                                <span *ngIf="list.isChange">{{list.chapter_name}}</span>
                                <nz-input style="width: 150px" *ngIf="!list.isChange" [(ngModel)]="list.chapter_name" [nzPlaceHolder]="'输入章节名称'"></nz-input>
                            </td>
                            <td class="projectList">
                                <span *ngFor="let check of CourseDataList[i].checkList;let x = index">

                                    <em *ngIf="list.isChange">{{check.p_name}}</em>
                                    <label *ngIf="!list.isChange" nz-checkbox [(ngModel)]="check.isCheck">&nbsp;{{check.p_name}}</label>
                                </span>
                            </td>
                            <td>
                                <button *ngIf="list.isChange" (click)="Edit(list)" nz-button [nzType]="'default'" [nzSize]="'small'" style="margin-right:10px;">
                                    <span>修改</span>
                                </button>
                                <button *ngIf="list.isChange" nz-button [nzType]="'default'" [nzSize]="'small'">
                                    <nz-popconfirm [nzTitle]="'确定要删除这个章节吗？'" (nzOnConfirm)="removeCourseData(list)" [nzOkText]="'确定'" [nzCancelText]="'取消'">
                                        <a nz-popconfirm>删除</a>
                                    </nz-popconfirm>
                                </button>
                                <button *ngIf="!list.isChange" nz-button [nzType]="'default'" [nzSize]="'small'" style="margin-right:10px;" (click)="saveCourseData(list)">
                                    <span>保存</span>
                                </button>
                                <button *ngIf="!list.isChange" (click)="cencalSave(list,i)" nz-button [nzType]="'default'" [nzSize]="'small'">
                                    <span>取消</span>
                                </button>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td height="50px"></td>
                <td>
                    <button style="margin-left:220px;" nz-button [nzType]="'primary'" (click)="addClassData(id)">
                        <span>添加</span>
                    </button>
                </td>
            </tr>
        </table>
    </ng-template>
</nz-modal>
